import React from 'react'
import { useNavigate } from 'react-router-dom'
import { Toast } from "@nutui/nutui-react"
import '@nutui/nutui-react/dist/style.css'
import './phone.scss'
import axios from 'axios'

export default function Mima() {
    const navigate = useNavigate()
    const [tel, setTel] = React.useState('')
    const [codes, setCodes] = React.useState('')
    const [errors, setErrors] = React.useState({})
    const handleTelChange = (e) => {
        setTel(e.target.value)
        setErrors({ ...errors, tel: '' })
    }
    const handleCodesChange = (e) => {
        setCodes(e.target.value)
        setErrors({ ...errors, codes: '' })
    }
    const handleSubmit = async (e) => {
        e.preventDefault()
        if (!tel) {
            setErrors({ ...errors, tel: '手机号不能为空' })
            return
        } else if (!/^1[3-9]\d{9}$/.test(tel)) {
            setErrors({ ...errors, tel: '手机号格式不正确' })
            return
        }
        if (!codes) {
            setErrors({ ...errors, codes: '密码不能为空' })
            return
        } else {
            let { data } = await axios.post('http://123.57.180.216:3000/users/login', { tel, pwd: codes })
            console.log(data);
            if (data.code === 200) {
                sessionStorage.setItem('piao', JSON.stringify(data.data))
                sessionStorage.setItem('move', JSON.stringify(data.data.orderid.moveid))
                localStorage.setItem('user', tel)
                sessionStorage.setItem('accesstoken', data.accesstoken)
                sessionStorage.setItem('refreshtoken', data.refreshtoken)
                sessionStorage.setItem("time", new Date().getTime())
                Toast.show({
                    content: data.msg,
                    contentStyle: {
                        width: '120px',
                        height: '40px',
                        fontSize: "20px"
                    }
                })
                navigate('/app/home')
            } else {
                Toast.show({
                    content: data.msg,
                    contentStyle: {
                        width: '120px',
                        height: '40px',
                        fontSize: "20px"
                    }
                })
            }
        }
    }
    return (
        <div className='box_l'>
            <div className='top'>
                <svg t="1717760655424" className="icon" onClick={() => { navigate('/app/home') }}
                    viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    p-id="1453" width="20" height="20"><path d="M249.344 497.664v29.696c0 14.848 11.776 26.624 26.624 26.624h692.224c14.848 0 26.624-11.776 26.624-26.624v-29.696c0-14.848-11.776-26.624-26.624-26.624H275.968c-14.848 0.512-26.624 12.288-26.624 26.624z" fill="#2c2c2c" p-id="1454"></path><path d="M146.944 530.944c-10.24-10.24-10.24-27.136 0-37.376l369.664-368.64c10.24-10.24 10.24-27.136 0-37.376l-21.504-21.504c-10.24-10.24-27.136-10.24-37.376 0L42.496 479.744c8.192-7.68 18.944-12.288 30.72-12.288-24.576 0-44.544 19.968-44.544 44.544s19.968 44.544 44.544 44.544c-12.288 0-23.04-4.608-31.232-12.8l414.208 414.208c10.24 10.24 27.136 10.24 37.376 0l21.504-21.504c10.24-10.24 10.24-27.136 0-37.376l-368.128-368.128z" fill="#2c2c2c" p-id="1455"></path></svg>
            </div>
            <div className='piao'>
                <div className='piao_left'></div>
                <span>账号密码登录</span>
            </div>
            <div className='inp'>
                <form onSubmit={(e) => { handleSubmit(e) }} className='m_form'>
                    <input type='text' placeholder='&nbsp;请输入手机号' className='m_phone'
                        value={tel} onChange={(e) => { handleTelChange(e) }} ></input>
                    {errors.tel && <div className="error">{errors.tel}</div>}
                    <div className='m_codebox'>
                        <input type='password' placeholder='&nbsp;请输入密码' className='m_code' value={codes} onChange={(e) => { handleCodesChange(e) }}></input>
                        {errors.codes && <div className="error">{errors.codes}</div>}
                        {/* <button className='m_getcode' onClick={getCodes} disabled={countdown > 0}>{countdown > 0 ? `${countdown}秒倒计时` : '获取验证码'}</button> */}
                    </div>
                </form>
                <button className='btn' onClick={(e) => { handleSubmit(e) }}>登录</button>
                <p className='ptext2' onClick={() => { navigate('/phone') }}>忘记密码？</p>
                <p className='ptext'>未注册的用户将自动创建账号</p>
                <p className='ptext1'>-----或通过以下方式登录-----</p>
                <div className='iconbox'>
                    <div className='icon' style={{ backgroundImage: 'url(./img/淘宝.png)' }}></div>
                    <div className='icon' style={{ backgroundImage: 'url(./img/微博.png)' }}></div>
                    <div className='icon' style={{ backgroundImage: 'url(./img/微信.png)' }}></div>
                    <div className='icon' style={{ backgroundImage: 'url(./img/支付宝支付.png)' }}></div>
                    <div className='icon' style={{ backgroundImage: 'url(./img/qq.png)' }}></div>
                </div>
                <p className='ptext3'>登录或注册代表同意<span style={{ color: 'orange' }}>用户服务协议</span></p>
            </div>

        </div>
    )
}
